<template>
  <div class="table_wrap">
    <el-table
      ref="multipleTable"
      :data="tableData.data"
      :cell-style="setCellStyle"
      :row-style="setRowStyle"
      :span-method="spanMethod"
      :size="size"
      :height="height"
      :border="border"
      @cell-click="cellCilckHandler"
      @selection-change="selectChange"
      @select="selectRow"
    >
      <slot name="prefix"></slot>
      <el-table-column
        v-if="selectionStatus"
        :selectable="selectable"
        type="selection"
        width="50"
      ></el-table-column>
      <el-table-column
        v-if="needIndex"
        type="index"
        :index="indexMethod"
        label="序号"
        width="50"
      ></el-table-column>
      <table-column
        v-for="(col, index) in tableData.columns"
        :col="col"
        :index="index"
        :key="col.prop"
        :toolTip="overflowTooltip"
        :canClick="col.canClick"
      ></table-column>
      <slot name="oper"></slot>
      <slot name="oper2"></slot>

      <!-- 下面dom为插槽 操作按钮示例
                <template v-slot:oper>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button
                                        @click.native.prevent="tableEdit(scope.$index, tableData.data)"
                                        type="text"
                                        size="small"
                                    >修改</el-button>
                                    <el-button
                                        class="color_danger"
                                        @click.native.prevent="tableDeleteRow(scope.$index, tableData.data)"
                                        type="text"
                                        size="small"
                                    >删除</el-button>
                                </template>
                            </el-table-column>
            </template>
            -->
    </el-table>
    <div
      class="pagination_wrap"
      :style="{ 'text-align': paginaAlgin }"
      v-if="needPagination"
    >
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        :current-page="tableData.page.current"
        :page-size="tableData.page.size"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import tableColumn from "./tableColumn";
export default {
  name: "tableComponent",
  components: {
    tableColumn,
  },
  props: {
    tableData: {
      type: Object,
      default: function () {
        return {
          columns: [],
          data: [],
          page: {
            current: 1,
            size: 10,
            total: 0,
          },
        };
      },
    },
    // 是否需要索引
    needIndex: {
      type: Boolean,
      default: false,
    },
    // 行点击事件
    rowClick: Function,
    cellCilck: Function,
    // 设置列的样式 (行内)
    setCellStyle: Function,
    setRowStyle: Function,
    // 合并单元格函数
    spanMethod: Function,
    size: {
      type: String,
      default: "",
    },
    // 是否需要分页
    needPagination: {
      type: Boolean,
      default: true,
    },
    // 启用多选栏
    selectionStatus: {
      type: Boolean,
      default: false,
    },
    // 是否显示单元格边框
    border: {
      type: Boolean,
      default: false,
    },
    // 固定表头，eg：200， 不需要从功能可不传
    height: String,
    checkSelection: Array, //列表被勾选的行数据、用于数据回显
    //
    overflowTooltip: {
      type: Boolean,
      default: true,
    },
    // 分页组件的对齐方式 left、right、center
    paginaAlgin: {
      type: String,
      default: "right",
    },
  },
  data() {
    return {
      checkList: [],
    };
  },
  mounted() {},
  watch: {
    tableData: function () {},
    checkSelection(val) {
      if (val.length > 0) {
        this.dataPlayback(val);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
  methods: {
    // 默认禁止勾选
    selectable(row) {
      if (row.isCheckSign == true) {
        return false;
      } else {
        return true;
      }
    },
    cellCilckHandler(row, column, cell, event) {
      // this.cellCilck(row, column, cell, event)
      this.$emit("cellClick", row, column, cell, event);
    },
    // 数据回显
    dataPlayback(val) {
      val.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
      });
    },
    selectChange(selection) {
      if (this.selectionStatus) {
        this.$emit("selectionChange", selection);
      }
    },
    // 当前所有勾选数据 勾选行数据
    selectRow(selection, row) {
      this.$emit("curSelectInfo", selection, row);
    },
    handleSizeChange(size) {
      this.$emit("handleSizeChange", size);
    },
    handleCurrentChange(page) {
      this.$emit("handleCurrentChange", page);
    },
    //序号
    indexMethod(index) {
      if (this.needPagination) {
        return (
          index +
          1 +
          (this.tableData.page.current - 1) * this.tableData.page.size
        );
      } else {
        return index + 1;
      }
    },
    // setCellStyle({row,column,rowIndex,columnIndex}){

    // }
  },
};
</script>

<style lang="less" scoped>
.table_wrap {
  width: 100%;
}
.pagination_wrap {
  padding-top: 18px;
}
</style>
